$(function() {
    //监听图片上传标签的变化
    // $('#feature').on('change', function() {
    //     //得到文件流
    //     const file = this.files[0];
    //     //创建FormData数据
    //     let formdata = new FormData();
    //     //将文件流信息追加到formdata对象中
    //     //文件名可能有限制，要测试
    //     formdata.append('cover', file);

    //     //上传文件
    //     $.ajax(baseUrl + '/upload'), {
    //         type: 'POST',
    //         data: formdata,
    //         //告知服务器当前数据的格式
    //         contenType: false, //'multipart/form-data',如果服务端有限制格式就使用这个 
    //         //如果没有限制格式，就设置成false

    //         //告知Ajax不要对参数进行序列化
    //         processData: false,
    //         success: function(res) {
    //             console.log('文件上传成功：', res);
    //         },
    //         error: function(err) {
    //             console.log('err:', err);
    //         },
    //         //告知Ajax返回数据将使用哪一种格式解析
    //         dataType: 'JSON',
    //     }

    // });


    //获取分类
    $.ajax(baseUrl + '/categories', {
        success: function(res) {
            const newHtml = template('post_add-id', { list: res })
            $('.new-form').html(newHtml)

            //模板渲染完成监听表单提交按钮
            submitform()
        },
        error: function(err) {
            console.log('err', err);

        }
    });

    //监听
    function submitform() {
        $('.submit-form').on('click', function() {
            console.log('监听到提交');
            //判断是否存在文章缩略图
            const filesEle = document.getElementById('feature')
            if (filesEle.files.length > 0) {
                //得到文件流
                const file = filesEle.files[0];
                //创建FormData数据
                let formdata = new FormData();
                //将文件流信息追加到formdata对象中
                //文件名可能有限制，要测试
                formdata.append('thumbnail', file);
                uploadImg(formdata).then(res => {
                    $('#thumbnail').val(res[0].thumbnail)
                    return uploadPosts($('.new-form').serialize())
                }).then(err => {
                    console.log('缩略图和文章一起上传', res);
                }).catch(err => {

                })
            } else {
                uploadPosts($('.new-form').serialize()).then(res => {
                    console.log(res);
                }).catch(err => {
                    console.log('xxx');
                })
            }
        })
    }


    //上传文章
    function uploadPosts(data) {
        return new Promise((resolve, reject) => {
            $.ajax(baseUrl + '/posts'), {
                type: 'POST',
                data: data,
                success: function(res) {
                    console.log('res:', res);
                    resolve(res)
                },
                error: function(err) {
                    console.log('err:', err);
                    reject(err)
                }
            }
        })
    }


    //上传图片
    function uploadImg(data) {
        return new Promise((resolve, reject) => {
            $.ajax(baseUrl + '/upload'), {
                type: 'POST',
                data: formdata,
                //告知服务器当前数据的格式
                contenType: false, //'multipart/form-data',如果服务端有限制格式就使用这个 
                //如果没有限制格式，就设置成false

                //告知Ajax不要对参数进行序列化
                processData: false,
                success: function(res) {
                    console.log('文件上传成功：', res);
                    resolve(res)
                },
                error: function(err) {
                    console.log('err:', err);
                    reject(err)
                },
                //告知Ajax返回数据将使用哪一种格式解析
                dataType: 'JSON',
            }

        })

    }


})